<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>生鲜商城</title>
    <!-- 引入样式 -->
    <link
            rel="stylesheet"
            href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />

    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="js/jquery.js"></script>
</head>
<body>
<el-container id="app">
    <!--头部导航 -->
    <el-header style="height:510px">
        <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
        >
            <div class="demo-image">
                <div class="block" :key="img.headbg">
                    <el-image
                            style="width: 1920px; height: 440px"
                            :src="img.headbg"
                            :fit="img.headbg">
                    </el-image>
                </div>
            </div>
            <el-menu-item index="0">首页</el-menu-item>
            <el-menu-item index="1">用户</el-menu-item>
            <el-menu-item index="2">商品</el-menu-item>
            <el-menu-item index="3">优惠券</el-menu-item>
            <el-menu-item index="4">秒杀</el-menu-item>
            <el-menu-item index="5">数据统计</el-menu-item>
            <el-menu-item index="6">登出</el-menu-item>
        </el-menu>
        <div class="line"></div>
    </el-header>
    <!-- 主体部分 请在下方写代码 -->
    <el-tabs :tab-position="tabPosition" >
        <el-tab-pane label="优惠卷信息详情">
            <el-form :inline="true" left  class="demo-form-inline" style="height: 70px;margin-left: 0px; margin-bottom: 0px">
                <el-form-item>
                    <label style="margin-right: 10px">优惠卷类型:</label> <el-select v-model="kuisile1" placeholder="请选择">
                    <el-option label="直接发放" value="直接发放"></el-option>
                    <el-option label="结算赠送" value="结算赠送"></el-option>
                    <el-option label="积分兑换" value="积分兑换"></el-option>
                </el-select>
                </el-form-item>
                <el-form-item>
                    <label style="margin-right: 10px">折扣类型:</label> <el-select v-model="kuisile2" placeholder="请选择">
                    <el-option label="直扣" value="直扣"></el-option>
                    <el-option label="折扣" value="折扣"></el-option>
                </el-select>
                </el-form-item>
                <el-form-item style="height: 50px; margin-bottom: 0px">
                    <el-button type="primary" @click="onSubmitOrders">查询</el-button>
                </el-form-item>

            </el-form>
            <el-table
                    :data="tableData"
                    stripe
                    border
                    style="width: 100%;margin:0 auto;text-align: center"
                    :default-sort = "{prop: 'couponId',}"
            >
                <el-table-column
                        prop="couponId"
                        label="优惠卷编号"
                        sortable
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="couponName"
                        label="优惠卷名称"
                        width="180">
                </el-table-column>

                <el-table-column
                        prop="couponNum"
                        label="剩余数量"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="couponPastdue"
                        label="过期时间">
                </el-table-column>
                <el-table-column
                        prop="couponStatus"
                        label="发放方式">
                </el-table-column>
                <el-table-column
                        prop="couponDiscountsStatus"
                        label="折扣类型">
                </el-table-column>
                <el-table-column
                        prop="couponDiscounts"
                        label="折扣">
                </el-table-column>
                <el-table-column
                        prop="productId"
                        label="打折商品">
                </el-table-column>
            </el-table>
            分页
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :current-page="pageIndex"
                    :total="pageCount" :page-size="3"
                    @current-change="jump"
            >
            </el-pagination>
        </el-tab-pane>



        <el-tab-pane label="新增优惠卷">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="优惠卷名称">
                    <el-input v-model="form.couponName"></el-input>
                </el-form-item>
                <el-form-item label="数量">
                    <el-input v-model="form.couponNum"></el-input>
                </el-form-item>

                <el-form-item >

                    <span class="demonstration">有效期</span>
                    <el-date-picker
                            v-model="form.couponPastdue"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                    </el-date-picker>

                </el-form-item>

                <el-form-item label="优惠卷类型">
                    <el-select v-model="form.couponDiscountsStatus" placeholder="请选择活动区域">
                        <el-option label="直接发放" value="直接发放"></el-option>
                        <el-option label="结算赠送" value="结算赠送"></el-option>
                        <el-option label="积分兑换" value="积分兑换"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="积分消耗">
                    <el-input v-model="form.couponScorePrice"></el-input>
                </el-form-item>
                <el-form-item label="折扣类型">
                    <el-select v-model="form.DiscountsStatus" placeholder="请选择折扣类型">
                        <el-option label="直扣" value="直扣"></el-option>
                        <el-option label="折扣" value="折扣"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="优惠力度">
                    <el-input v-model="form.couponDiscounts"></el-input>
                </el-form-item>

                <el-form-item label="优惠商品Id">
                    <el-input v-model="form.productId"></el-input>
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" @click="onSubmit">快来买，商家血亏</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>

        </el-tabs>




    </el-main>
</el-container>
<script>

    var app = new Vue({
        el: "#app",
        data: {
            //此处请改为对应的选项
            activeIndex: "3",


            img: {
                headbg: '/img/bg/banner3back.jpg',
            },
            tabPosition:"left",
            options: [{
                // value: '',
                couponName: ''

            }],
            tableData:[{
            }],
            pageCount:0,
            pageIndex:1,
            CouponId:"",
            kuisile1:"",
            kuisile2:"",
            form: {
                couponName: '',
                couponNum: '',
                couponPastdue:'',
                couponDiscountsStatus:'',
                couponScorePrice:'',
                DiscountsStatus:'',
                couponDiscounts:'',
                productId:''
            },

        },
        methods: {
            //导航 添加中
            handleSelect: function (key, keyPath) {
                console.log(key, keyPath);
                if(key==0){
                    window.location.href="/index"
                }else if(key==1){
                    window.location.href="/user"
                }else if(key==2){
                    window.location.href="/product"
                }else if(key==3){
                    window.location.href="/coupon"
                }else if(key==4){
                    window.location.href="/limited"
                }else if(key==5){
                    window.location.href="/statistics"
                }else if(key==6){
                    $.ajax({
                        url:"/logout",
                    })
                }
            },
            onSubmitOrders(){
                var vm=this;
                // console.log(vm.kuisile1)
                // console.log(vm.kuisile2)
                axios.get("/freshmarket/coupon/select",{params:{couponStatus:vm.kuisile1,couponDiscountsStatus:vm.kuisile2}}).then(function (resp) {
                console.log(resp)
                    vm.tableData=resp.data.data.records;
                    vm.pageCount=resp.data.data.total
                    vm.pageIndex=resp.data.data.current

                })
            },
            onSubmit() {
                var vm=this;
                // var formData=new FormData();
                // formData.append(vm.couponName)
                console.log(vm.couponPastdue)
                axios.get("/freshmarket/coupon/addCoupon",{params:vm.form})
                .then(function (resp) {
                    console.log(resp)
                if(resp.success){
                alert(resp.data.message)
                }else if(!resp.success){
                    alert(resp.data.message)
                }

                })
            },
            jump:function (pageIndex) {
                var vm=this;

                axios.get("/freshmarket/coupon/select",{params:{pageIndex:pageIndex,couponStatus:vm.kuisile1,couponDiscountsStatus:vm.kuisile2}}).then(function (resp) {
                    vm.tableData=resp.data.data.records;
                    // console.log(resp.data.data.records)
                    // console.log(resp)
                })
            }
        },
        //生命周期初始化
        mounted: function () {
            var vm=this;
            axios.get("/freshmarket/coupon/selectAll").then(function (data) {
            // console.log(data)
                //页面数据
            vm.tableData=data.data.data.records;

                vm.pageCount=data.data.data.total
                 vm.pageIndex=data.data.data.current
                // vm.options=data.data.data.records.couponName
                // console.log(data.data.data.records.couponName)
            })
        },


    });
</script>
</body>
</html>
